<template>
  <div class="app-container">
    <el-card style="position: relative">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="快递模版" name="template">
          <TemplateList v-if="activeName === 'template'" />
        </el-tab-pane>
        <el-tab-pane label="快递公司" name="company">
          <CompanyList v-if="activeName === 'company'" />
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute; top: 20px; right: 20px">
        <el-button v-show="activeName === 'template'" type="primary" @click="expressHandle"
          >快递配置</el-button
        >
        <el-button v-show="activeName === 'template'" type="primary" @click="addTemplate"
          >新增快递模板</el-button
        >
        <el-button v-show="activeName === 'company'" type="primary" @click="addCompany"
          >新增快递公司</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import TemplateList from './template/template-list.vue'
import CompanyList from './company/company-list.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ExpressTemplate',
  components: {
    CompanyList,
    TemplateList
  },
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState('base', ['tab_key']),
    activeName: {
      get() {
        return this.tab_key ? this.tab_key : 'template'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    handleClick({ name }) {
      this.SET_TABS_TYPE({ value: name })
    },
    // 快递配置
    expressHandle() {
      this.$router.push({ name: 'ExpressConfig' })
    },
    // 新增模板
    addTemplate() {
      this.$router.push({ name: 'AddExpressTemplate' })
    },
    // 新增快递公司
    addCompany() {
      this.$router.push({ name: 'AddCompany' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
